<template>
	<view class="content">
		<map :id='myMap' class="map-box" :latitude="me.latitude" :longitude="me.longitude" :scale="scale"
			:markers="markers" show-location @markertap="clickmarks">
		</map>
		<view class="map-mask">

		</view>
		<cu-custom bgColor="" :isBack="true" textRight="true" type="custom-recuit">
			<block slot="backText">
				<view class="titilestyle">
					{{title}}
				</view>

			</block>
		</cu-custom>

		<!-- 底部功能卡 -->
		<view class="map-bottom bg-white">
			<view class="left-button" @click="changeFn">
				<image :src="res+'/static/motorcycles/img/button_c.png'" mode="" v-if="isRide"></image>
				<image :src="res+'/static/motorcycles/img/button_p.png'" mode="" v-else></image>

			</view>
			<view class="right-button" @click="location">
				<image :src="res+'/static/motorcycles/img/location.png'" mode=""></image>
			</view>

			<scroll-view scroll-y="false" scroll-x="true" class="type">
				<view class="left-box">

				</view>
				<view class="item" v-for="(item,index) in taber" :key="index" :class="index==tabIndex?'hover':'nohover'"
					@click="navTo(index)">


					<view class="" :class="item.status==0?'title-noopen':'title-open'">
						{{item.title}}
					</view>
					<view class="desc">
						{{item.desc}}
					</view>
					<view class="tips middle" :class="item.status==0?'noopen':'open'" v-if="item.active">
						{{item.active || "暂未开放"}}
					</view>

				</view>
			</scroll-view>

			<view class="fun-list grid col-5">
				<view class="item  middle flex-direction" v-for="(item,i) in fu" :key="i" @click="jumpTo(i)">

					<view class="item middle flex-direction" v-if="item.type!=1">
						<view class="img-box">
							<image :src="res+item.icon" mode="aspectFit"></image>
							<view class="cuIcon-title text-red" v-if="item.notice">

							</view>
						</view>

						<view class="name"  style="font-size: 20rpx;">
							{{item.name}}
						</view>
					</view>
					
					<button class="item middle flex-direction " v-else open-type='contact' style="background-color: transparent;border: none;">
						<view class="img-box">
							<image :src="res+item.icon" mode="aspectFit" class="buttonimg"></image>
							<view class="cuIcon-title text-red" v-if="item.notice">
						
							</view>
						</view>
						
						<view class="nameTitle" style="font-size: 20rpx;">
							{{item.name}}
						</view>
					</button>

				</view>
			</view>

			<view class="bottom-button" @click="scanCode">
				<view class="round middle">
					<text class="cuIcon-scan"></text> 扫码用车
				</view>
			</view>


		</view>



	</view>
</template>

<script>
	export default {

		data() {

			return {
				title: "出行",
				myMap: 'myMap',
				res: this.apiHost + "/static/otherApp/",
				mapCtx: {},
				markers: null, //停车点
				//绘制线路的数组
				polyline: [],
				distanceArr: [],
				scale: 16,
				currentPoint: null,
				me: { //默认位置
					latitude: 30.491533629892512,
					longitude: 104.07340486262129,
				},
				isRide: false,
				taber: [{
						title: "电动车",
						desc: "1.5元/15分钟",
						status: 1,
						active: "双十一大促"
					},
					{
						title: "观光车",
						desc: "2元/次",
						status: 0,
						active: "暂未开放"
					},
					{
						title: "自行车",
						desc: "1元/15分钟",
						status: 1,
						active: ""

					},
					{
						title: "滑板车",
						desc: "2元/次",
						status: 0,
						active: "暂未开放"
					},
					{
						title: "校外大巴",
						desc: "1元/15分钟",
						status: 1,
						active: ""

					}
				],
				tabIndex: 0,
				fu: [{
						name: "活动",
						icon: "/static/motorcycles/img/active.png",
						notice: true,
						path: "./active",
						type: "2",
					},
					{
						name: "客服",
						icon: "/static/motorcycles/img/kefu.png",
						notice: false,
						type: "1",


					},
					{
						name: "行程",
						icon: "/static/motorcycles/img/xingcheng.png",
						notice: true,
						path: "./tripRecord",
						type: "2",


					},
					{
						name: "报修",
						icon: "/static/motorcycles/img/baoxiu.png",
						notice: false,
						path: "./repair",
						type: "2",
					},
					{
						name: "我的",
						icon: "/static/motorcycles/img/user.png",
						notice: false,
						path: "./user",
						type: "2",
					}



				]

			}
		},
		mounted() {


			this.location();
		},
		methods: {
			/**
			 * 选择停车或骑行
			 */
			changeFn() {
				this.isRide = (this.isRide) ? false : true;
			},
			/**
			 * 定位
			 */
			location() {

				uni.showLoading({
					title: "定位中..."
				})
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {

						this.me.latitude = res.latitude;
						this.me.longitude = res.longitude;
						uni.hideLoading();

					},
					fail: (e) => {
						uni.hideLoading();
						console.log("获取位置失败")
					}
				})

			},


			/**
			 * @param {Object} index
			 */
			navTo(index) {

				if (this.taber[index].status == 0) {
					return
				}
				this.tabIndex = index;
				switch (this.taber[index].path) {
					case "":

						break;

					default:

						uni.navigateTo({
							url: this.taber[index].path
						})


						break;


				}


			},
			/**
			 * 选择应用
			 * @param {Object} i
			 */
			jumpTo(i) {
				switch (this.fu[i].type) {
					case "0": //客服

						//   uni.showToast({
						//   	title:"暂未开放",
						// icon:"none"
						//   })




						break;

					default:

						uni.navigateTo({
							url: this.fu[i].path
						})
						break;

				}




			},


			/**
			 * 扫码
			 */
			scanCode() {
				
				
				// uni.navigateTo({
				// 	url: "./scan"
				// })
				
				uni.scanCode({
				    onlyFromCamera: true,
				    success: function (res) {
				        console.log('条码类型：' + res.scanType);
				        console.log('条码内容：' + res.result);
				    }
				});


			}





		}


	}
</script>

<style scoped>
	.content {
		position: relative;
		height: 100vh;
		overflow: hidden;
	}

	.map-box,
	.map-mask {
		width: 100vw;
		height: calc(100vh*(1222/1667));
	}

	.map-mask {
		position: absolute;
		top: 0;
		pointer-events: none;
		background-color: rgba(0, 0, 0, 0.1);
	}

	.map {
		opacity: 1;
	}
	button{
		    -webkit-tap-highlight-color: transparent;
		    background-color: transparent;
		    border-radius: 0px;
		    box-sizing: border-box;
		    color: #000;
		    cursor: pointer;
		    display: flex;
		  
		    line-height: 1.2;
		    margin-left: auto;
		    margin-right: auto;
		    overflow: hidden;
		    padding-left: 14rpx;
		    padding-right: 14rpx;
		    position: relative;
		    text-align: center;
		    text-decoration: none;
			border: none;
	}
	.buttonimg{
		
			width: calc(100vw*(40/750));
			height: calc(100vw*(40/750));
		
	}
	button::after{
		border: none;
	}
</style>
<style lang="scss">
	.nameTitle {
		font-size: 20rpx;
		font-weight: 500;
		color: #333333;
		margin-top: 5rpx;
	}
	.titilestyle {
		font-size: 40rpx;
	}

	.map-bottom {
		width: 100vw;
		position: absolute;
		min-height: calc(100vh*(450/1667));
		font-family: PingFang SC;
		bottom: 0;

		.left-button {
			position: absolute;
			left: 40rpx;
			top: calc(-100vw*(210/750));

			image {
				width: calc(100vw*(80/750));
				height: calc(100vw*(160/750));
			}
		}

		.right-button {
			position: absolute;
			right: 40rpx;
			top: calc(-100vw*(108/750));

			image {
				width: calc(100vw*(68/750));
				height: calc(100vw*(68/750));
			}
		}

		.type {
			width: 100vw;
			min-height: calc(100vw*(120/750));
			white-space: nowrap;

			::-webkit-scrollbar {
				display: none;
			}

			.left-box {
				display: inline-block;
				width: 40rpx;
				height: inherit;
			}

			.hover {
				border: 4rpx solid #1270E0;

				.title-open {
					font-size: 32rpx;
					font-weight: 800;
					color: #1270E0;
				}
			}

			.nohover {
				border: 2rpx solid #DBDBDB;

				.title-noopen {
					font-size: 32rpx;
					font-weight: 800;
					color: #999999;
				}

				.title-open {
					font-size: 32rpx;
					font-weight: 800;
					color: #333333;
				}
			}


			.item {
				width: calc(100vw*(240/750));
				padding: 20rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				position: relative;
				margin-right: 20rpx;
				margin-bottom: 40rpx;
				margin-top: 40rpx;
				min-height: calc(100vw*(120/750));
				display: inline-block;

				.desc {
					font-size: 24rpx;
					font-weight: 500;
					color: #999999;
					margin-top: 10rpx;
				}

				.tips {
					position: absolute;
					top: -20rpx;
					right: 0;
					font-size: 18rpx;
					min-height: 30rpx;
					padding: 5rpx 10rpx;
					border-radius: 15rpx 15rpx 15rpx 4rpx;
					font-weight: bold;
				}

				.open {
					background: #EDB713;
					color: #000000;
				}

				.noopen {
					color: #666666;
					background: #DBDBDB;
				}

			}
		}

		.fun-list {

			min-height: 60rpx;
			margin: 0 50rpx 0 50rpx;

			.item {


				.img-box {
					position: relative;
					width: calc(100vw*(40/750));
					height: calc(100vw*(40/750));

					image {
						width: calc(100vw*(40/750));
						height: calc(100vw*(40/750));
					}

					.cuIcon-title {
						top: -20rpx;
						font-size: 40rpx;
						right: -20rpx;
						position: absolute;
					}
				}

				.name {
					font-size: calc(100vw(20/750));
					font-weight: 500;
					color: #333333;
					margin-top: 5rpx;
				}

			}


		}

		.bottom-button {
			width: 100%;
			padding: 40rpx 50rpx 40rpx 50rpx;

			view {
				font-size: 32rpx;
				font-weight: 800;
				color: #FFFFFF;
				background: #1270E0;
				height: calc(100vw*(100/750));

				.cuIcon-scan {
					margin-right: 16rpx;
				}
			}

		}
	}
</style>
